<template>
  <div id="comSer">
    <el-container>
      <el-aside width="200px">
        <div class="title">
          <h2>公司服务</h2>
        </div>
        <div class="navButton">
          <el-menu
                  default-active='0'
                  class="el-menu-vertical-demo"
                  background-color="#2368ba"
                  text-color="#e7d9d9"
                  active-text-color="#ffd04b">
            <el-menu-item v-for="(item,index) in tab"
                          :index="index.toString()"
                          @click="changeRouter(index)">
              <i class="el-icon-menu"></i>
              <span slot="title" style="font-size: 16px">{{item.name}}</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import ServiceItem from "../../components/content/ServiceItem";
  export default {
    name: "CompanyService",
    components:{
      ServiceItem
    },
    data(){
      return{
        title:'公司服务',
        tab:[
          {
            name:'公司设立',
            path:'/service/companyService/companyBuild'
          },
          {
            name:'公司变更',
            path:'/service/companyService/companyChange'
          },
          {
            name:'工商年报',
            path:'/service/companyService/commerceReport'
          },
          {
            name:'信息公示',
            path:'/service/companyService/messagePublic'
          },
          {
            name:'企业注销',
            path:'/service/companyService/companyLogout'
          },
        ]
      }
    },
    methods: {
      changeRouter(index) {
        this.$router.push(this.tab[index].path)
      }
    }
  }
</script>

<style scoped>
  .pro{
    background-color: #ffffff;
    width: 200px;
    height: 40px;
    border-top: 4px solid #0d6eb8;
    color: #0d6eb8;
    font-size: 18px;
    line-height: 40px;
  }
  .content{
    background-color: #ffffff;
    width: 100%;
    display: flex;
    /*height: 600px;*/
  }

  /deep/.el-aside {
    /*background-color: #2368ba;*/
    color: #333;
    text-align: center;
    height: calc(100vh - 84px);
    /*line-height: 82px;*/
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    height: calc(100vh - 84px);
  }

  .title{
    width: 100%;
    height: 100px;
    line-height: 100px;
    border-bottom: 2px solid #0f4984;
    /*background-color: #225793;*/
    color: #2550a7;
  }
  .el-button{
    width: 150px;
    margin: 15px auto;
    font-size: 18px;
  }
  h2,h3{
    margin: 0;
  }


</style>